<style lang="scss" scoped>
    .student_lesson_details{
        min-height: calc(100vh - 80px);
    }
</style>
<template>
    <div class="student_lesson_details py-2 border-radius">
        <h4 class="block-title">模型展示 <span class="font-14 color-ddd ml-1">本次得分率：<span class="color-yellow">{{accuracy}}%</span></span></h4>
        <div class="mt-1 mb-2 pl-1"> 
            <download-list v-if="modelFile.length" :file_list="modelFile"/>
            <p v-else>您没有上传此答案组合文件</p>
        </div>
        <h4 class="block-title">题目树 <span class="color-999 font-12">（点击标题展示展示题目，点击上下箭头展示子节点）</span></h4>
        <Tree :data="treeData" ref="tree" @on-select-change="getNode" :render="treeRender"></Tree>
        <Divider>题目列表</Divider>
        <div v-if="active_node.id">
            <p class="text-center font-16 color-fff" v-if="!currentGroup.length">此节点下无题目</p>
            <div v-for="(value,index) in currentGroup" :key="index" class="mt-2 mb-1 currentGroup">
                <div class="d-flex line-height-26">
                    <h4 class="block-title  mr-1">{{value.is_multi?'多选题':'单选题'}}</h4>
                </div>
                <div class="details p-1">
                    <p class="mb-1">{{value.title}}</p>
                    <CheckboxGroup v-if="value.is_multi" v-model="currentGroupAnswer[index]" >
                        <Checkbox class="d-block mb-1" :label="val.index" v-for="val in value.option" :key="val.index">{{val.index+'：'+val.text}}</Checkbox>
                    </CheckboxGroup>
                        <RadioGroup v-else vertical v-model="currentGroupAnswer[index]">
                            <Radio :label="val.index" v-for="val in value.option" :key="val.index">{{val.index+'：'+val.text}}</Radio>
                        </RadioGroup>
                    <div class="my-1" v-if="value.file_list.length">
                        <span class="mr-1">附件列表:</span>
                        <download-list :file_list="value.file_list"/>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
</template>
<script>
    import {transcript_detail,un_answer_question_students} from "@/common/tapi"
    import {diff_arr} from "@/common/tool"
    export default {
        data(){
            return {
                content:{
                    file_list:[]
                },
                questions_list:[],
                currentGroupAnswer:[],
                currentGroup:[],
                treeData:[],
                active_node:{
                    id:'',
                    title:''
                },
                modelFile:[],
                accuracy:0
            }
        },
         methods:{
            getNode(){
                this.currentGroupAnswer=[]
                const node=this.$refs.tree.getSelectedNodes()
                if(node.length){
                    const {title,id}=node[0]
                    this.active_node={id,title}

                    this.currentGroup=this.questions_list.filter(el=>{
                        if(el.node_id===id){
                            this.currentGroupAnswer.push(el.is_multi?el.content.split(','):el.content)
                            return el
                        }
                    })
                }
            },
            treeRender(h, { data }){
                return h('span', {
                    style: {
                        display: 'inline-block',
                    }
                }, [
                    h('span', [
                        h('Icon', {
                            props: {
                                type: 'ios-paper-outline'
                            },
                            style: {
                                marginRight: '8px',
                                color:'#19be6b'
                            }
                        }),
                        h('span', data.title)
                    ]),
                    h('span', {
                        style: {
                            display: 'inline-block',
                            float: 'right',
                            marginRight: '32px'
                        }
                    })
                ]);
            },
        },
        created(){
            transcript_detail({id:this.$route.query.id})
            .then(res=>{
                if(res){
                    this.content=res.data.lesson
                    this.accuracy=res.data.info.accuracy
                    this.questions_list=res.data.answers.map(el=>{
                        el.option=JSON.parse(el.option)
                        return el
                    })
                    this.treeData=res.data.lesson.nodes
                    const currentAnswer=res.data.answers.map(el=>el.content)
                    res.data.lesson.answers.forEach(el => {
                        if(diff_arr(currentAnswer,el.answers))
                            this.modelFile=el.file_list
                    });

                }
            })
        }
    }
</script>